<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%"
  >
    <el-col :span="20">
      <span>{{ nodeData.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col :span="12">{{ nodeData.manager }}</el-col>
        <el-col :span="12">
          <el-dropdown>
            <span>操作<i class="el-icon-arrow-down" /></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="add">添加子部门</el-dropdown-item>

                <el-dropdown-item v-if="!isRoot" @click.native="edit">查看部门</el-dropdown-item>

                <el-dropdown-item v-if="!isRoot" @click.native="del"
                  >删除部门</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDpmList } from "@/api/departments";
export default {
  name: "TreeTools",
  props: {
    nodeData: {
      type: Object,
      required: true,
    },
    isRoot: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 删除部门
    async del() {
      try {
        await this.$confirm("你确定要删除该部门吗", "温馨提示", {
          type: "warning",
        });
      } catch {
        return;
      }
      await delDpmList(this.nodeData.id);
      this.$message.success("删除成功");
      this.$emit("getDpmList");
    },
    // 增加子部门
    add() {
      // console.log(1111);
      this.$emit("addDepart", this.nodeData);
    },
    //编辑部门
    edit() {
    this.$emit('editDepart', this.nodeData)
},
  },
};
</script>

<style>
.el-col {
  height: 30px;
  line-height: 30px;
}
.el-icon-caret-right:before {
  content: "\e723";
  color: #000;
}
.el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
.el-tree-node__expand-icon.expanded::before {
  content: "\e722";
  color: #000;
}

.el-tree-node__expand-icon.is-leaf::before {
  content: "\e7a5";
  color: #000;
}

</style>
